<!DOCTYPE html>
<html>
  <head>
    <title>MiniSearch Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link href='app.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id="app">
      <div class="App">
        <div class="Loader">loading...</div>
        <article class="main">
          <header class="Header">
            <h1>Song Search</h1>
            <div class="SearchBox">
              <div class="Search">
                <input type="text" autoComplete="none" autoCorrect="none" autoCapitalize="none" spellCheck="false" />
                <button class="clear">&times;</button>
              </div>

              <ul class="SuggestionList">
              </ul>

              <details class="AdvancedOptions">
                <summary>Advanced options</summary>
                <form class="options">
                  <div>
                    <b>Search in fields:</b>
                    <label>
                      <input type="checkbox" name="fields" value="title" checked />
                      Title
                    </label>
                    <label>
                      <input type="checkbox" name="fields" value="artist" checked />
                      Artist
                    </label>
                  </div>
                  <div>
                    <b>Search options:</b>
                    <label><input type="checkbox" name="prefix" value="true" checked /> Prefix</label>
                    <label><input type="checkbox" name="fuzzy" value="true" checked /> Fuzzy</label>
                  </div>
                  <div>
                    <b>Combine terms with:</b>
                    <label><input type="radio" name="combineWith" value="OR" checked /> OR</label>
                    <label><input type="radio" name="combineWith" value="AND" /> AND</label>
                  </div>
                  <div>
                    <b>Filter:</b>
                    <label>
                      from year:
                      <select name="fromYear">
                        <!-- populated by JS with list of years -->
                      </select>
                    </label>
                    <label>
                      to year:
                      <select name="toYear">
                        <!-- populated by JS with list of years -->
                      </select>
                    </label>
                    <script type="text/javascript">
                      const populateYears = (selector, minYear, maxYear, selectedYear) => {
                        document.querySelector(selector).innerHTML = 
                          Array.from({ length: maxYear - minYear + 1 }, (_, i) => i + minYear)
                          .map(y => `<option value="${y}" ${y === selectedYear ? 'selected' : ''}>${y}</option>`)
                          .join('\n')
                      }

                      populateYears('select[name=fromYear]', 1965, 2015, 1965)
                      populateYears('select[name=toYear]', 1965, 2015, 2015)
                    </script>
                  </div>
                </form>
              </details>
            </div>
          </header>
          <p class="Explanation">
            This is a demo of the <a
              href="https://github.com/lucaong/minisearch">MiniSearch</a> JavaScript
            library: try searching through more than 5000 top songs and artists
            in <em>Billboard Hot 100</em> from year 1965 to 2015. This example
            demonstrates search (with prefix and fuzzy match) and auto-completion.
          </p>
          <ul class="SongList">
          </ul>
        </article>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/minisearch@7.1.3/dist/umd/index.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
  </body>
</html>

